<!--
 * @Description: 红包详情入口
 * @Author: liyujie
 * @Date: 2021/2/3
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/2/3
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <el-tabs v-model="activeName">
                <el-tab-pane
                    label="查看红包"
                    name="detail"
                >
                    <packet-detail :packet-no="no"/>
                </el-tab-pane>
                <el-tab-pane
                    label="领券记录"
                    name="receive-record"
                    lazy
                >
                    <receive-record :packet-no="no"/>
                </el-tab-pane>
                <el-tab-pane
                    label="使用记录"
                    name="use-record"
                    lazy
                >
                    <use-record :packet-no="no"/>
                </el-tab-pane>
                <el-tab-pane
                    label="退回记录"
                    name="return-record"
                    lazy
                >
                    <return-record :packet-no="no"/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import packetDetail from "../red-packet-editor";
import receiveRecord from './receive-record';
import useRecord from './use-record';
import returnRecord from './return-record';
import { back } from '@/mixin/back';

export default {
    name: "Index",
    data() {
        return {
            // 红包编号
            no: '',
            activeName: 'detail'
        };
    },
    mixins: [back],
    components: {
        packetDetail,
        receiveRecord,
        useRecord,
        returnRecord
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '红包', path: '/student/red-packet-list'},{title: '查看红包'}]);
        this.no = this.$route.query.no || '';
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;
    height: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;

        /deep/ .el-tabs {
            height: 100%;

             .el-tabs__nav-wrap {
                height: 54px;
                padding-left: 24px;

                .el-tabs__nav-scroll {
                    .el-tabs__nav {
                        height: 54px;
                        line-height: 54px;
                    }
                }
            }

            .el-tabs__content {
                height: calc(100% - 67px);
                .el-tab-pane {
                    height: 100%;
                    overflow-y: auto;
                }
            }
        }
    }
}
</style>
